<template>
  <div class="main">
    <div class="banner">
      <img src="../../assets/img/banner_new.png" alt />
    </div>
    <div class="information_list">
      <div class="information_list_tit">
        <span></span>诉求发生属地
      </div>
      <div class="information_list_main bottom_line" @click="sqtypeVisible = true">
        <span style="color: red;display: inline;">*</span>
        {{sqtypename}}
        <van-icon name="arrow" />
      </div>
    </div>
    <div class="information_list">
      <div class="information_list_tit">
        <span></span>诉求信息
      </div>
      <div class="information_list_main bottom_line" @click="typeVisible = true">
        <span style="color: red;display: inline;">*</span>
        {{typename}}
        <van-icon name="arrow" />
      </div>
      <div class="information_list_main bottom_line" v-if="type === 'name'">
        <span>
          <span style="color: red;display: inline;">*</span>姓名
        </span>
        <van-field v-model="name" placeholder="请输入姓名" style="padding:10px 0;" />
      </div>
      <div class="information_list_main bottom_line" v-if="type === 'code'">
        <span>
          <span style="color: red;display: inline;">*</span>身份证号
        </span>
        <van-field v-model="idnum_tm" placeholder="请点击上传按钮。" style="padding:10px 0;" readonly>
          <van-uploader slot="button" :after-read="card_info" upload-text="123123">
            <van-button size="small" type="info">
              <span style="color:#fff">上传</span>
            </van-button>
          </van-uploader>
        </van-field>
      </div>
      <van-dialog v-model="show" title="上传身份证注意事项" :show-confirm-button="false">
        <div
          style="font-size:14px;line-height:14px;padding:0.3rem 0.4rem;color: #646566;"
        >请上传您的身份证照片（正面），注意保持字体清晰，系统将自动识别</div>
        <div style="width:100%;display:flex;">
          <div style="width:50%;text-align:center;padding:0.2rem 0;" @click="show = false">取消</div>
          <div style="width:50%;text-align:center;padding:0.2rem 0;">
            <van-uploader slot="button" :after-read="card_info" upload-text="123123">
              <span style="color:#1989fa;">上传</span>
            </van-uploader>
          </div>
        </div>
      </van-dialog>
      <van-popup v-model="typeVisible" position="bottom" round title="类别">
        <van-picker
          show-toolbar
          :columns="typeList"
          value-key="name"
          @cancel="typeVisible = false"
          @confirm="settype"
        />
      </van-popup>
      <van-popup v-model="sqtypeVisible" position="bottom" round title="诉求发生属地">
        <van-picker
          show-toolbar
          :columns="sqtypeList"
          value-key="name"
          @cancel="sqtypeVisible = false"
          @confirm="setsqtype"
        />
      </van-popup>
      <!-- <div class="information_list_main bottom_line" @click="natureVisible = true">
        {{naturename}}
        <van-icon name="arrow" />
      </div>
      <van-popup v-model="natureVisible" position="bottom" round title="类型">
        <van-picker
          show-toolbar
          :columns="natureList"
          value-key="name"
          @cancel="natureVisible = false"
          @confirm="setNature"
        />
      </van-popup>-->
      <div class="information_list_main">
        <span>
          <span style="color: red;display: inline;">*</span>描述
        </span>
        <textarea
          style="height:2rem;"
          placeholder="请将事件起因、经过、结果描述清楚，请重点表述您的诉求。"
          v-model="description"
        ></textarea>
      </div>
    </div>
    <div class="information_list">
      <div class="information_list_tit">
        <span></span>凭证材料
      </div>
      <div style="padding:13px  0.4rem 5px 0.4rem;background:#fff;">
        <!-- <upload :imagesList="pz_image"></upload> -->
        <van-uploader v-model="pz_image" multiple />
      </div>
    </div>
    <div style="padding:0.4rem 0;">
      <button class="upload" @click="check_form" style="margin-top:0px;">提交</button>
    </div>
    <van-dialog v-model="show_check_mobile" title="身份验证" show-cancel-button @confirm="check_sms">
      <div class="information_list">
        <!-- <div class="information_list_tit">
          <span></span>身份验证
        </div>-->
        <div class="information_list_main bottom_line">
          <!-- <span>
            <span style="color: red;display: inline;">*</span>手机号
          </span>-->
          <van-field v-model="phone" placeholder="请输入手机号" style="padding:10px 0;" class="inp">
            <span slot="label">
              <span style="color: red;display: inline;">*</span>手机号
            </span>
          </van-field>
          <van-field
            v-model="sms"
            center
            clearable
            placeholder="请输入验证码"
            style="padding:10px 0;"
            class="inp"
          >
            <span slot="label">
              <span style="color: red;display: inline;">*</span>验证码
            </span>
            <van-button
              slot="button"
              size="small"
              type="primary"
              @click="send_sms"
              v-if="is_send_mss"
            >
              <span style="color:#fff">发送验证码</span>
            </van-button>
            <van-button slot="button" size="small" type="primary" v-else>
              <span style="color:#fff" class="countdown">
                <van-count-down
                  :time="time"
                  format="ss"
                  :auto-start="false"
                  ref="countDown"
                  @finish="finish"
                />
              </span>
            </van-button>
          </van-field>
        </div>
      </div>
    </van-dialog>
    <!-- <div class="progress" @click="goList();">
      <van-icon name="search" />进度查询
    </div>-->
    <!-- <div style="padding:0.4rem 0.4rem;background:#fff;" @click="goList();">
      <div style="display:flex; justify-content:space-between;align-items:center;">
        <span
          style="color:#555555;text-align:left;font-size:0.3rem;vertical-align: middle;display:-webkit-box;overflow: hidden;white-space: normal;text-overflow: ellipsis;word-wrap: break-word;-webkit-line-clamp:2;-webkit-box-orient: vertical;"
        >查看历史诉求调处情况(评价、投诉)</span>
        <van-icon name="arrow" size="25" color="#555555" />
      </div>
    </div>-->
    <loading :show="show_loading" text="请稍等..."></loading>
    <p class="service">
      本服务由嘉善县社会治理综合指挥服务中心提供
      <br />服务咨询热线：
      <a @click="callphone('0573-84991118')">0573-84991118</a>
    </p>
  </div>
</template>

<script>
import "../../assets/js/bridge.min.js";
import Upload from "@/components/Upload";
import { Loading } from "vux";
import { Dialog } from "vant";
export default {
  components: {
    Loading,
    Upload,
  },
  data() {
    return {
      typeid:'',
      show_sd: false,
      sqwhere_name: "",
      show: false,
      show_loading: false,
      type: "",
      sqtype: "",
      is_send_mss: true,
      time: 60 * 1000,
      show_check_mobile: false,
      pz_image: [],
      description: "",
      typeList: [
        // { name: "咨询", type: "name" },
        // { name: "信访预登记", type: "code" },
        // { name: "调解预登记", type: "code" },
        // { name: "仲裁预登记", type: "code" },
        // { name: "法律援助预登记", type: "code" },
      ],
      sqtypeList: [],
      typename: "请选择类别",
      sqtypename: "请选择诉求发生属地",
      typeVisible: false,
      sqtypeVisible: false,
      phone: "",
      name: "",
      sms: "",
      idnum_tm: "",
      info: {
        username: "",
        idnum: "",
        address: "",
      },
    };
  },
  mounted() {
    this.getToken();
    this.getSdList();
    this.getTypeList();
  },
  watch: {
    typename(newValue, oldValue) {
      if (newValue != "咨询") {
        // Dialog.alert({
        //   message:
        //     "请上传您的身份证照片（正面），注意保持字体清晰，系统将自动识别"
        // }).then(() => {
        //   // on close
        // });
        this.show = true;
      }
    },
  },
  methods: {
    getTypeList() {
      let that = this;
      this.xhr.get(
        {
          service: "btype/wl?",
          param: {
          },
        },
        (data) => {
          // console.log(data)
          this.typeList = data;
          this.typeList.forEach((item)=>{
            if(item.name == '咨询'){
              item.type="name"
            }else{
              item.type= 'code'
            }
          })
          // this.sqtypeList = data;
        },
        (error) => {
          Toast(error);
        }
      );
    },
    getSdList() {
      let that = this;
      this.xhr.get(
        {
          service: "town/center/list?",
          param: {
          },
        },
        (data) => {
          console.log(data)
          this.sqtypeList = data;
        },
        (error) => {
          Toast(error);
        }
      );
    },
    card_info(file) {
      this.show_loading = true;
      console.log("file", file);
      let formData = new FormData();
      formData.append("sj_img", file.file);
      this.xhr.callForm(
        {
          service: "incident/card_info?token=" + this.common.getLocal("token"),
          data: formData,
        },
        (data) => {
          this.show_loading = false;
          this.$notify({ type: "success", message: "上传成功" });
          console.log(data);
          this.info.username = data.name;
          this.info.address = data.address;
          this.info.idnum = data.id;
          this.idnum_tm = data.tm_id;
          if (this.show) {
            this.show = false;
          }
        },
        (error) => {
          this.show_loading = false;
          Dialog.alert({
            message:
              "身份证识别失败，请上传您的身份证照片（正面），保持字体清晰",
          }).then(() => {
            // on close
          });
        }
      );
    },
    finish() {
      this.$refs.countDown.reset();
      this.is_send_mss = true;
    },
    getToken() {
      this.xhr.get(
        {
          service: "go/zzd/wechat?",
          param: {},
        },
        (data) => {
          this.common.setLocal("token", data.token);
        },
        (error) => {
          alert(error);
        }
      );
    },
    check_sms() {
      if (this.phone == "") {
        this.$notify("请输入手机号！");
        return;
      } else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$notify("手机号有误！");
        return;
      } else if (this.sms == "") {
        this.$notify("请输入验证码！");
        return;
      }
      this.xhr.get(
        {
          service: "judge_code?",
          param: {
            token: this.common.getLocal("token"),
            phone: this.phone,
            code: this.sms,
          },
        },
        (data) => {
          if (data == "err") {
            this.$notify("验证码错误！");
          } else {
            this.saveInfo();
          }
          console.log("data", data);
        },
        (error) => {
          alert(error);
        }
      );
    },
    send_sms() {
      if (this.phone == "") {
        this.$notify("请先输入手机号！");
        return;
      } else if (!/^1[3456789]\d{9}$/.test(this.phone)) {
        this.$notify("手机号有误！");
        return;
      }
      this.is_send_mss = false;
      this.$nextTick(function () {
        this.$refs.countDown.start();
      });
      this.xhr.get(
        {
          service: "send_sms?",
          param: {
            token: this.common.getLocal("token"),
            phone: this.phone,
          },
        },
        (data) => {
          this.$notify({ type: "success", message: "发送验证码成功" });
          console.log("data", data);
        },
        (error) => {
          alert(error);
        }
      );
    },
    check_form() {
       if (!this.typeid) {
        this.$notify("请选择诉求发生属地！");
        return;
      }
      if (this.typename == "请选择类别") {
        this.$notify("请选择类别！");
        return;
      }
      if (!this.name && this.type === "name") {
        this.$notify("请输入姓名！");
        return;
      }
      if (!this.idnum_tm && this.type === "code") {
        this.$notify("请录入身份证号！");
        return;
      }
      if (!this.description) {
        this.$notify("描述不能为空！");
        return;
      }
      this.show_check_mobile = true;
    },
    settype(value, index) {
      this.typename = this.typeList[index].name;
      this.type = this.typeList[index].type;
      this.typeid = this.typeList[index].id;
      this.typeVisible = false;
    },
    setsqtype(value, index) {
      this.sqtypename = this.sqtypeList[index].name;
      this.sqtype = this.sqtypeList[index].id;
      this.sqtypeVisible = false;
    },
    saveInfo() {
      let formData = new FormData();
      formData.append("origin", "wl");
      formData.append("token", this.common.getLocal("token"));
      if (this.type == "code") {
        formData.append("name", this.info.username);
      } else if (this.type == "name") {
        formData.append("name", this.name);
      }
       formData.append("center_town_dept_id", this.sqtype);
      formData.append("idno", this.info.idnum);
      formData.append("hj_address", this.info.address);
      // formData.append("idtype", "");
      formData.append("phone", this.phone);
      // formData.append("userid", "");
      // formData.append("sj_id", "");
      formData.append("fromwhere", "微信");
      // formData.append("sj_id", "n");
      formData.append("fw_type_id", this.typeid);
      formData.append("nature_id", this.natureid);
      formData.append(
        "description",
        "【" + this.typename + "】" + this.description
      );
      this.pz_image.forEach((item) => {
        formData.append("sj_img", item.file);
      });
      this.xhr.callForm(
        {
          service: "api/incident/create?token=" + this.common.getLocal("token"),
          data: formData,
        },
        (data) => {
          // this.$notify("操作成功");
          this.$router.push("/success");
        },
        (error) => {
          alert(error);
          this.$notify(error);
        }
      );
    },
    callphone(phone) {
      let that = this;
      dd.ready(
        {
          developer: "jiangc@dtdream.com",
          usage: ["dd.biz.user.realAuthentication", "dd.biz.telephone.call"],
          remark: "",
        },
        function () {
          dd.biz.telephone.call({
            corpId: phone,
            onSuccess: function (data) {},
            onFail: function (error) {
              alert(JSON.stringify(error));
            },
          });
        }
      );
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.banner {
  width: 100%;
}

.banner img {
  width: 100%;
}
.countdown /deep/ .van-count-down {
  color: #fff;
}
.inp /deep/ .van-field__label {
  width: auto;
  padding-right: 10px;
}
</style>
